<template>
	<s-layout title="会员详情">
		<view class="heard">
			<view class="user-info">
				<image src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" class="avatar" />
				<view class="info">
					<view class="user">
						<text>{{state.detail.username}}</text>
						<text class="vip">VIP{{state.detail.level}}</text>
					</view>
					<view class="id-car">
						<text>ID：{{state.detail.id}}</text>
						<text class="tel">电话：{{state.detail.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="white-card ontop">
			<view class="nav-btn">
				<view @click="chargeMoney(state.detail.id)">
					<image class="nav-icon" src="../../static/r-balance.png" alt="" />
					<text>充值余额</text>
				</view>
				<!-- <view @click="">
					<image class="nav-icon" src="../../static/r-freeze.png" alt="" />
					<text>冻结余额</text>
				</view> -->
				<view @click="chargeScore(state.detail.id)">
					<image class="nav-icon" src="../../static/r-integral.png" alt="" />
					<text>充值积分</text>
				</view>
				<view @click="toCoupouns(state.detail.id)">
					<image class="nav-icon" src="../../static/r-coupons.png" alt="" />
					<text>赠送优惠券</text>
				</view>
				<!-- <view @click="">
					<image class="nav-icon" src="../../static/r-change.png" alt="" />
					<text>修改密码</text>
				</view> -->
				<!-- <view @click="">
					<image class="nav-icon" src="../../static/r-blacklist.png" alt="" />
					<text>加入黑名单</text>
				</view> -->
				<view @click="delMember(state.detail.id)">
					<image class="nav-icon" src="../../static/r-remove.png" alt="" />
					<text>删除会员</text>
				</view>
			</view>
		</view>
		<view class="white-card">
			<uni-list>
				<uni-list-item showArrow :border="false" title="余额" :rightText="state.detail.money" class="list-border" />
				<uni-list-item showArrow :border="false" title="积分" :rightText="state.detail.score" class="list-border" />
				<uni-list-item showArrow :border="false" title="优惠券" :rightText="state.detail.user_coupons" class="list-border" />
			</uni-list>
		</view>
		<view class="white-card">
			<su-tabs :list="state.tabs" lineColor="#3A43FF" :scrollable="false" @change="changeTab"
				:current="state.activeTab"></su-tabs>
			<uni-list v-if="state.activeTab == 0">
				<uni-list-item :border="false" title="手机号" :rightText="state.detail.mobile" class="list-border" />
				<uni-list-item :border="false" title="会员等级" :rightText="state.detail.level" class="list-border" />
				<!-- <uni-list-item :border="false" title="会员卡" rightText="1234567" class="list-border" />
				<uni-list-item showArrow :border="false" title="会员标签" rightText="" class="list-border" /> -->
			</uni-list>
            <uni-list v-else-if="state.activeTab == 1">
            	<uni-list-item :border="false" title="消费金额" :rightText="state.profile.pay_fee.toString()" class="list-border" />
            	<uni-list-item :border="false" title="订单数" :rightText="state.profile.orders.toString()" class="list-border" />
                <uni-list-item :border="false" title="售后订单数" :rightText="state.profile.order_afters.toString()" class="list-border" />
                <uni-list-item :border="false" title="退款金额" :rightText="state.profile.refund_fee.toString()" class="list-border" />
            </uni-list>
            <uni-list v-else>
                <uni-list-item :border="false" title="分销等级" :rightText="state.commagentInfo.level.toString()" class="list-border" />
                <uni-list-item :border="false" title="累计佣金" :rightText="state.commagentInfo.total_income.toString()" class="list-border" />
                <uni-list-item :border="false" title="已提现佣金" :rightText="state.commagentInfo.ytx.toString()" class="list-border" />
                <uni-list-item :border="false" title="待入账佣金" :rightText="state.commagentInfo.drz.toString()" class="list-border" />
                <uni-list-item :border="false" title="分销订单" :rightText="state.commagentInfo.child_order_count_0.toString()" class="list-border" />
                <uni-list-item :border="false" title="上级分销商" :rightText="state.commagentInfo.parent_user_name.toString()" class="list-border" />
                <uni-list-item :border="false" title="自动升级" :rightText="level_status" class="list-border" />
                <uni-list-item :border="false" title="分销下级" :rightText="user_count.toString()" class="list-border" />
            </uni-list>
		</view>
        <!--充值余额-->
        <su-popup :show="state.showMoneyPop" position="bottom" round="10" showClose="true" @close="closeMoney">
          <view class="popup">
            <view class="title">充值余额</view>
            <input v-model="state.moneyInfo.amount" placeholder="请输入充值余额" class="input"></input>
            <view class="title">备注</view>
            <textarea v-model="state.moneyInfo.memo" placeholder="请输入备注信息" class="textarea"></textarea>
            <view class="btns">
              <button class="ss-reset-button" @tap="closeMoney">取消</button>
              <button class="ss-reset-button sub-btn" @tap="submitMoney">确认</button>
            </view>
          </view>
        </su-popup>
        <!--充值积分-->
        <su-popup :show="state.showScorePop" position="bottom" round="10" showClose="true" @close="closeScore">
          <view class="popup">
            <view class="title">充值积分</view>
            <input v-model="state.scoreInfo.amount" placeholder="请输入充值积分" class="input"></input>
            <view class="title">备注</view>
            <textarea v-model="state.scoreInfo.memo" placeholder="请输入备注信息" class="textarea"></textarea>
            <view class="btns">
              <button class="ss-reset-button" @tap="closeScore">取消</button>
              <button class="ss-reset-button sub-btn" @tap="submitScore">确认</button>
            </view>
          </view>
        </su-popup>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
        computed
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const state = reactive({
		activeTab: 0,
		tabs: [{
			name: '基本信息',
		}, {
			name: '交易信息',
		}, {
			name: '分销信息',
		// }, {
		// 	name: '推广员',
		}],
        detail: {
        	id: 1,
            level: "",
        	username: "",
        	mobile: "",
        },
        // 充值金额
        showMoneyPop: false,
        moneyInfo: {
          id: 0,
          type: 'money',
          memo: '',
          amount: ''
        },
        // 充值积分
        showScorePop: false,
        scoreInfo: {
          id: 0,
          type: 'score',
          memo: '',
          amount: ''
        },
        commagentInfo: {},
        profile: {}
	})
    
    const level_status = computed(() => {
        return state.commagentInfo.level_status == 0 ? '不启用' : '启用'
    })
    
    const user_count = computed(() => {
        return state.commagentInfo.child_user_count_1 + state.commagentInfo.child_user_count_2
    })


	function changeTab(value) {
		state.activeTab = value.index;
	}
    
    async function getDetail(id) {
        const res = await sheep.$mapi.member.detailmbmer({id});
        console.log('detail', res)
        if(res.code === 1){
            Object.assign(state.detail, res.data)
        }
    }
    
    async function getCommagentInfo(id) {
        const res = await sheep.$mapi.member.commagentinfo({id});
        console.log('info', res)
        if(res.code === 1){
            state.commagentInfo = res.data
        }
    }
    
    async function getProfile(id) {
        const res = await sheep.$mapi.member.profile({id});
        console.log('profile', res)
        if(res.code === 1){
            state.profile = res.data
        }
    }
    
    function chargeMoney(id) {
        state.showMoneyPop = true;
        state.moneyInfo.id = id;
    }
    
    function chargeScore(id) {
        state.showScorePop = true;
        state.scoreInfo.id = id;
    }
    
    function closeMoney(){
      state.moneyInfo = {
        id: 0,
        type: 'money',
        memo: '',
        amount: ''
      };
      state.showMoneyPop = false;
    }
    
    async function submitMoney(){
      const res = await sheep.$mapi.member.recharge(state.moneyInfo);
      if(res.code === 1){
        uni.showToast({
          title: '充值成功',
          icon: 'success'
        });
        closeMoney();
      }
    }
    
    function closeScore(){
      state.scoreInfo = {
        id: 0,
        type: 'score',
        memo: '',
        amount: ''
      };
      state.showScorePop = false;
    }
    
    async function submitScore(){
      const res = await sheep.$mapi.member.recharge(state.scoreInfo);
      if(res.code === 1){
        uni.showToast({
          title: '充值成功',
          icon: 'success'
        });
        closeScore();
      }
    }
    
    async function delMember(id){
        const res = await sheep.$mapi.member.delMember({id});
        if(res.code === 1){
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          closeScore();
        }
    }
    
    function toCoupouns(id){
        // sheep.$router.go('/pages/coupon/sendList')
        uni.navigateTo({
            url:  `/pages/coupon/sendList?userId=${id}`
        })
    }

	onLoad((options) => {
        getDetail(options.id)
        getCommagentInfo(options.id)
        getProfile(options.id)
	});
</script>

<style lang="scss" scoped>
    .popup {
      padding: 28rpx;
      .title{
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        margin-bottom: 40rpx;
      }
      .input {
          margin-bottom: 40rpx;
          padding: 20rpx;
          font-size: 28rpx;
          color: #333333;
          background: #F7F7F7;
          border-radius: 20rpx;
      }
      .textarea{
        box-sizing: border-box;
        width: 100%;
        height: 400rpx;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333333;
        background: #F7F7F7;
        border-radius: 20rpx;
        margin-bottom: 50rpx;
      }
      .btns{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        >button{
          width: 48%;
          height: 80rpx;
          font-size: 28rpx;
          color: #333333;
          background: #F7F7F7;
          border-radius: 80rpx;
        }
        .sub-btn  {
          color: #fff;
          background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
        }
      }
    }
	.heard {
		padding: 28rpx;
		padding-bottom: 100rpx;
		position: relative;
		background: linear-gradient(117deg, #70C6FF 0%, #383FFF 100%);
		color: #fff;

		&::after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: "";
			width: 100%;
			height: 20%;
			background: linear-gradient(to bottom, transparent, #F7F7F7);
			opacity: 0.7;
		}

		.user-info {
			display: flex;
			margin: 40rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;

				>view {
					display: flex;
					align-items: center;
				}
			}

			.user {
				font-weight: 800;
				font-size: 40rpx;

				.vip {
					padding: 5rpx;
					background: linear-gradient(95deg, #FFD48E 0%, #FFF2E1 46%, #FFD48E 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #D5CBB3;
					font-weight: 400;
					font-size: 20rpx;
					color: #351F07;
					margin-left: 15rpx;
				}
			}

			.id-car {
				justify-content: space-between;
				margin-top: 15rpx;
			}
		}
	}

	.ontop {
		position: relative;
		z-index: 99;
		padding: 0 28rpx;
		margin-top: -100rpx !important;
	}

	.white-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin: 28rpx;
	}

	.nav-btn {
		display: flex;
		flex-wrap: wrap;

		>view {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #353535;
			margin: 20rpx 0;

			.nav-icon {
				width: 92rpx;
				height: 92rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.list-border {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		border-top: 2rpx solid #eeeeee;

		&:first-child {
			border: none;
		}
	}
</style>
